@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/add.css')}}">
@section('content')
<div class="mainHrContent" id="demandAdd" v-cloak>
    <div class="demandadd_left">
        <div>
            <div class="demandadd_step">
                <em>1</em>商品信息
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" label-position="top" size="mini" :rules="rules" ref="ruleForm1">
                    <el-form-item label="商品标题" prop="title">
                        <el-input v-model="goodsDetails.title"></el-input>
                    </el-form-item>
                    <el-form-item label="商品封面图" prop="thumb">
                        <el-upload class="avatar-uploader" name="image"
                                   :action="uploadImgUrl"
                                   :show-file-list="false"
                                   :on-success="handleAvatarSuccessimg"
                                   :before-upload="beforeAvatarUpload">
                            <img v-if="goodsDetails.thumb" :src="goodsDetails.thumb" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="content">
                        <el-upload class="upload-demo" list-type="picture" name="image"
                                   :action="uploadImgUrl"
                                   :on-remove="handleRemove"
                                   :on-error='handleErro'
                                   :on-success="handleAvatarSuccess"
                                   :file-list="img_arr">
                            <span class="addPicture">
                                <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                添加图片
                            </span>
                            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div> -->
                        </el-upload>
                        <el-input type="textarea" v-model="goodsDetails.content" rows="10">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="商品类型" prop="cid" ref="ruleForm">
                                <el-cascader v-model="goodsDetails.cid" :options="typeArr"></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="商品类别" prop="type">
                                <el-select v-model="goodsDetails.type" placeholder="请选择">
                                    <el-option :key="2" label="实物" :value="2">
                                    </el-option>
                                    <el-option :key="1" label="非实物" :value="1">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="商品价格（单位：人民币 元）" prop="price">
                                <el-input v-model="goodsDetails.price"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="运费（单位：人民币 元）" prop="price">
                                <el-input v-model="goodsDetails.freight"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="库存" prop="storage">
                                <el-input v-model="goodsDetails.storage"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>2</em>联系信息
            </div>
            <div class="demandadd_main">
                <el-form :model="goodsDetails" label-position="top" size="mini" :rules="rules" ref="ruleForm">
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="link_name">
                                <el-input v-model="goodsDetails.link_name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人电话" prop="link_phone">
                                <el-input v-model="goodsDetails.link_phone"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="部门" prop="link_department">
                                <el-input v-model="goodsDetails.link_department"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="link_position">
                                <el-input v-model="goodsDetails.link_position"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                </el-form>
            </div>
        </div>
        <button @click="submitForm('ruleForm','ruleForm1')" style="margin-bottom: 30px;">@{{good_id==''?'发布':'修改'}}产品</button>
    </div>
    <div class="demandadd_right">
        <div class="recommendStore">
            <div class="recommendStore_store">
                <img src="{{URL::asset('./img/icon/sponsor.png')}}" alt="...">
                该商品发布供应商
            </div>
            {{--<div class="recommendStoreList" v-for="(item,index) in rightStore" :key="index" v-if="index<2">--}}
            <div class="recommendStoreList">
                    <div class="recommendStore_header">
                        <img :src="rightStore.logo">
                    </div>
                    <div class="recommendStore_main">
                        <div class="nameS">
                            <span>@{{rightStore.store_name}}</span>
                            <img src="{{URL::asset('./img/store/storeColloct.svg')}}" v-if="rightStore.quality==2">
                            <img src="{{URL::asset('./img/store/shourm.svg')}}" v-if="rightStore.hot==2">
                        </div>
                        <p class="description">公司介绍: @{{rightStore.description}}</p>
                        <div class="text_box">
                            <span style="margin-right:5px">擅长领域: </span>
                            <div class="sc_box">
                                <p class="text" v-for="(item1,index1) in rightStore.cate_name" :key="index1" v-if="index1 < 2">@{{item1.name}}</p>
                                {{--<p class="text" v-if="rightStore.cate_name.length > 2">...</p>--}}
                            </div>
                        </div>
                        <div class="listContent_mes">
                            <span>
                                浏览
                                @{{rightStore.view}}
                            </span>
                            <span>
                                来电咨询
                                @{{rightStore.call}}
                            </span>
                            <!-- <span>
                                    <img src="{{URL::asset('./img/store/storeListNote.png')}}">
                                    成交量
                                    @{{item.service}}
                                </span> -->
                            <span>
                                好评
                                @{{rightStore.credit}}%
                            </span>
                        </div>
                        <!-- <div class="mainS">
                            @{{item.service_scope}}
                        </div> -->
                    </div>
                    <div class="recommendStore_button">
                        {{--<button @click.stop="getQRcode(item)">--}}
                            {{--联系TA--}}
                            {{--<div class="listButtonDialog" v-show="item.bool" @click.stop="item.bool=false">--}}
                                {{--<div class="listButtonDialog_img">--}}
                                    {{--<span>--}}
                                        {{--<img src="{{URL::asset('./img/store/listButtonDialog_img.png')}}" alt="">--}}
                                        {{--@{{item.link.master_phone}}--}}
                                    {{--</span>--}}
                                    {{--<p class="listButtonDialog_name"> @{{item.link.master_name}}</p>--}}
                                    {{--<!-- <p class="listButtonDialog_tel">--}}
                                    {{--电话接通率：<a>--}}
                                        {{--100%--}}
                                    {{--</a>--}}
                                {{--</p> -->--}}
                                {{--</div>--}}
                                {{--<div class="listButtonDialog_QRcode">--}}
                                    {{--<img :src="'http://api.online-service.vip/qr/create/phone?w=200&h=200&n='+item.link.master_phone+'&style=0'" alt="">--}}
                                    {{--<span>扫码快速拨打电话</span>--}}
                                    {{--<a>x</a>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</button>--}}
                        <button style="width: 115px;
    height: 36px;
    background: rgba(255,255,255,1);
    border: 1px solid rgba(255,165,49,1);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #FFA531;" @click="window.location.href = '{{ route('home.store.store') }}?id='+rightStore.id">
                            进入店铺
                        </button>
                        <p class="area">地址:@{{rightStore.area}}</p>
                    </div>
                </div>
            <a v-if="item.target!=2" style="display:block;width:100%" :href="item.link" v-for="item in imgData"  target="_blank">
                <img :src="item.thumb" style="width:322px;height: 322px;" alt="...">
            </a>
            <a v-else style="display:block;width:100%" :href="item.link" v-for="item in imgData">
                <img :src="item.thumb" style="width:322px;height: 322px;" alt="...">
            </a>
        </div>
    </div>
</div>
<style>
    .el-cascader--mini {
        width: 100%;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandAdd = new Vue({
            el: '#demandAdd',
            data: () => {
                return {
                    good_id: getQueryString("goodsId") || '',
                    goodsDetails: {
                        title: '',
                        thumb: '',
                        images: [],
                        content: '',
                        type: '',
                        cid: [],
                        storage: 0,
                        freight: 0.00,
                        price: '',
                        link_name: '',
                        link_phone: '',
                        link_department: '',
                        link_position: '',
                    },
                    img_arr:[],
                    rightStore: [],
                    imgData: [],
                    typeArr: [],
                    uploadUrl: UPLOAD_FILE,
                    uploadImgUrl: UPLOAD_IMG,
                    fileList: [],
                    imageUrl: '',
                    rules: {
                        title: [{
                            required: true,
                            message: '请输入相关信息',
                            trigger: 'blur'
                        }],
                        thumb: [{
                            required: true,
                            message: '请选择商品封面图',
                            trigger: 'blur'
                        }],
                        content: [{
                            required: true,
                            message: '请填写商品描述',
                            trigger: 'blur'
                        }],
                        type: [{
                            required: true,
                            message: '请选择商品类别',
                            trigger: 'change'
                        }],
                        cid: [{
                            required: true,
                            message: '请选择商品类型',
                            trigger: 'change'
                        }],
                        link_name: [{
                            required: true,
                            message: '请填写联系人',
                            trigger: 'change'
                        }],
                        link_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        link_department: [{
                            required: true,
                            message: '请填写部门',
                            trigger: 'change'
                        }],
                        link_position: [{
                            required: true,
                            message: '请填写职位',
                            trigger: 'change'
                        }],
                        price: [{
                            required: true,
                            validator: validatePrice,
                            trigger: 'blur'
                        }],
                        storage: [{
                            required: true,
                            validator: validatePositiveNum,
                            trigger: 'blur'
                        }],


                    }
                }
            },
            watch: {
                goodsDetails: {
                    handler: (newVal, oldVal) => {
                        if (newVal.title.length > 25) {
                            newVal.title = newVal.title.substring(0, 25)
                        }
                    },
                    deep: true
                }
            },
            created() {
                this.goodsDetails.link_name = JSON.parse(sessionStorage.getItem("HRuserDetails")).need_infos.company_name
                this.goodsDetails.link_phone = JSON.parse(sessionStorage.getItem("HRuserDetails")).need_infos.mobile
                console.log(getQueryString("goodsId"))
                if (getQueryString("goodsId")) {
                    this.getDetails();
                }
                let data = {
                    type: 2
                }
                apiAjax("{{ route('home.public.category')}}", 'get', data, (res) => {
                    if (res.code == 0) {
                        this.typeArr = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                    });
                    }
                }, (erro) => {

                });
                {{--apiAjax("{{ route('home.store.rightStoreApi')}}", 'ge
                        });
                    }
                }, (erro) => {
t', {}, (res) => {--}}
                    {{--if (res.code == 0) {--}}
                        {{--this.rightStore = res.data;--}}
                    {{--} else {--}}
                        {{--this.$message({--}}
                            {{--message: res.msg,--}}
                            {{--type: 'warning'--}}
                        {{--});--}}
                    {{--}--}}
                {{--}, (erro) => {--}}

                {{--});--}}

                apiAjax("{{ route('home.user.supplierGoodsStoreApi')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.rightStore = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });

                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 22
                }, (res) => {
                    if (res.code == 0) {
                        this.imgData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                //点击获取电话转二维码
                getQRcode(item) {
                    if (sessionStorage.getItem("HRuserDetails") && JSON.parse(sessionStorage.getItem("HRuserDetails")).id) {
                        let HRuserDetails = JSON.parse(sessionStorage.getItem("HRuserDetails"))
                        if (HRuserDetails.type == 1) {
                            let data = {
                                phoneA: HRuserDetails.mobile,
                                store_id: item.id,
                            }
                            apiAjax("{{ route('home.phone.map')}}", 'post', data, (res) => {
                                if (res.code == 0) {
                                    item.bool = true;
                                    item.link = res.data;
                                } else {
                                    this.$message({
                                        message: res.msg,
                                        type: 'warning'
                                    });

                                }
                            }, (erro) => {

                            });
                        } else {
                            this.$message({
                                message: "您不是HR用户哦！！",
                                type: 'warning'
                            });
                        }

                    } else {
                        this.$message({
                            message: "请先登录",
                            type: 'warning'
                        });
                    }

                },
                getDetails() {
                    let data = {
                        good_id: this.good_id
                    }
                    apiAjax("{{ route('home.user.supplierGoodsApi')}}", 'get', data, (res) => {
                        console.log(res.data)
                        if (res.code == 0) {
                            this.goodsDetails = res.data;
                            res.data.images.map(item=>{
                                this.img_arr.push({url:item})
                            })

                            // let arr = [];
                            // for (var i=0;i<res.data.images.length;i++ ){
                            //     arr.push(res.data.images[i].url)
                            // }
                            // this.goodsDetails.images =res.data.images||[]
                            // console.log(this.goodsDetails.images)
                        } else {
                            this.$message({
                                message: res.msg,
                                type: 'warning'
                            });
                        }
                    }, (erro) => {

                    });
                },
                submitForm(formName, formName1) {
                    // let images=[];
                    // this.goodsDetails.images.forEach(element => {
                    //     if(element.url){
                    //         images.push(element.url)
                    //     }else{
                    //         images.push(element)
                    //     }
                    // });
                    this.$refs[formName1].validate((valid) => {
                        if (valid) {
                            this.$refs[formName].validate((valid) => {
                                if (valid) {
                                    let data = {
                                        id: this.good_id,
                                        thumb: this.goodsDetails.thumb,
                                        title: this.goodsDetails.title,
                                        cate_pid: this.goodsDetails.cid[0],
                                        cate_id: this.goodsDetails.cid[1],
                                        type: this.goodsDetails.type,
                                        content: this.goodsDetails.content,
                                        // images:this.goodsDetails.images,
                                        images:this.goodsDetails.images,
                                        price: this.goodsDetails.price,
                                        link_name: this.goodsDetails.link_name,
                                        link_phone: this.goodsDetails.link_phone,
                                        // link_department: this.goodsDetails.link_department,
                                        // link_position: this.goodsDetails.link_position,
                                        storage: this.goodsDetails.storage,
                                        freight: this.goodsDetails.freight,
                                    }

                                    apiAjax("{{ route('home.user.supplierGoodsUpdateApi')}}", 'post',data, (res) => {
                                        console.log(res)
                                        if (res.code == 0) {
                                            this.$message({
                                                message: res.msg,
                                                type: 'success'
                                            });
                                            setTimeout(() => {
                                                window.location.href = "{{ route('home.suppliermy.supplierGoods') }}";
                                            }, 3000);
                                        } else {
                                            this.$message({
                                                message: res.msg,
                                                type: 'warning'
                                            });
                                        }
                                    }, (erro) => {

                                    });
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                },
                handleErro() {
                    this.$message.error('上传失败');
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleAvatarSuccessimg(res, file) {
                    this.goodsDetails.thumb = file.response.data.path;
                },
                handleAvatarSuccess(res, file) {
                    // this.goodsDetails.thumb = file.response.data.path;
                    this.goodsDetails.images.push(res.data.path)
                    // this.goodsDetails.images.push(URL.createObjectURL(file.raw))
                },
                handleRemove(file, fileList) {
                    // this.goodsDetails.images= [];
                    // fileList.forEach(element => {
                    //     this.goodsDetails.images.push(element.response.data.path)
                    // });
                    this.goodsDetails.images.indexOf(file.url) !=-1? this.goodsDetails.images.splice(this.goodsDetails.images.indexOf(file.url),1) : '';
                },
            }
        })
    })
</script>
@endsection